`:top
`!Velocity`! is a `F33f`_`[cross-platform`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Cross-platform]`_`f `F33f`_`[JavaScript library`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript_library]`_`f designed to simplify the `F33f`_`[client-side scripting`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Client-side_scripting]`_`f of website animation.`:cite-ref-davidwalsh1-4-0[`F5bf`_`[4`#cite-note-davidwalsh1-4]`_`f] Velocity is `F33f`_`[free, open-source`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Free_and_open_source_software]`_`f software licensed under the `F33f`_`[MIT License`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=MIT_License]`_`f.`:cite-ref-github1-3-1[`F5bf`_`[3`#cite-note-github1-3]`_`f] It is the most popular open source web animation engine.`:cite-ref-5[`F5bf`_`[5`#cite-note-5]`_`f]
Velocity's syntax is designed to make it easier to create complex animations for `F33f`_`[HTML`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=HTML]`_`f and `F33f`_`[SVG`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Scalable_Vector_Graphics]`_`f elements.`:cite-ref-6[`F5bf`_`[6`#cite-note-6]`_`f] In addition to its workflow benefits, Velocity provides animation performance that is competitive with `F33f`_`[CSS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=CSS]`_`f-based animation.`:cite-ref-davidwalsh2-7-0[`F5bf`_`[7`#cite-note-davidwalsh2-7]`_`f] Velocity achieves its performance by maintaining an internal cache of animation states and minimizing "layout `F33f`_`[thrashing`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Thrashing_(computer_science)]`_`f," the undesirable behavior that `F33f`_`[web browsers`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_browsers]`_`f undergo when visually updating at a fast rate.`:cite-ref-davidwalsh2-7-1[`F5bf`_`[7`#cite-note-davidwalsh2-7]`_`f] Altogether, its workflow and performance benefits allow Velocity to be used for sophisticated animation programming that can be integrated into both web and mobile applications.`:cite-ref-8[`F5bf`_`[8`#cite-note-8]`_`f] Its broad browser and device support make it ideal for large enterprise distributions that must support low-powered devices.`:cite-ref-9[`F5bf`_`[9`#cite-note-9]`_`f]
Velocity is used to power the user interfaces of many notable websites, including `F33f`_`[Uber`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Uber]`_`f, `F33f`_`[Samsung`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Samsung]`_`f, `F33f`_`[WhatsApp`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=WhatsApp]`_`f, `F33f`_`[Tumblr`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Tumblr]`_`f, `F33f`_`[HTC`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=HTC]`_`f, `F33f`_`[Mazda`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Mazda]`_`f, and `F33f`_`[Microsoft Windows`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Microsoft_Windows]`_`f. It is one of the most favorited projects on the code hosting service `F33f`_`[GitHub`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=GitHub]`_`f.`:cite-ref-10[`F5bf`_`[10`#cite-note-10]`_`f] In 2015, Velocity was nominated for `*Open Source Project of the Year`* by `F33f`_`[The Net Awards`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=The_Net_Awards]`_`f.`:cite-ref-11[`F5bf`_`[11`#cite-note-11]`_`f]
>>Contents
• `F0af`_`[Features`#features]`_`f
• `F0af`_`[Browser support`#browser-support]`_`f
• `F0af`_`[Usage`#usage]`_`f
• `F0af`_`[Including the library`#including-the-library]`_`f
• `F0af`_`[Usage styles`#usage-styles]`_`f
• `F0af`_`[Arguments`#arguments]`_`f
• `F0af`_`[Chaining`#chaining]`_`f
• `F0af`_`[Scrolling and reversal`#scrolling-and-reversal]`_`f
• `F0af`_`[History`#history]`_`f
• `F0af`_`[See also`#see-also]`_`f
• `F0af`_`[Further reading`#further-reading]`_`f
• `F0af`_`[External links`#external-links]`_`f
• `F0af`_`[References`#references]`_`f
-─
>>Features
Velocity's features include:`:cite-ref-davidwalsh1-4-1[`F5bf`_`[4`#cite-note-davidwalsh1-4]`_`f]
• Browser window and element scrolling
• Independence from the `F33f`_`[jQuery`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JQuery]`_`f framework`:cite-ref-12[`F5bf`_`[12`#cite-note-12]`_`f]
• Animation reversal (the ability to undo the previous animation) and animation looping
• `F33f`_`[SVG`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Scalable_Vector_Graphics]`_`f element animation`:cite-ref-13[`F5bf`_`[13`#cite-note-13]`_`f]
• `F33f`_`[RGB`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_colors]`_`f and `F33f`_`[hex`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_colors]`_`f color animation
• `F33f`_`[CSS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=CSS]`_`f's `*transform`* property animation
• Pre-created animation effects via Velocity's `*UI Pack`*`:cite-ref-14[`F5bf`_`[14`#cite-note-14]`_`f]
• Physics-based motion via the `*spring`* easing type
• `F33f`_`[Promises`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Futures_and_promises]`_`f integration
>>>Browser support
Velocity supports all major desktop browsers (`F33f`_`[Firefox`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Firefox]`_`f, `F33f`_`[Google Chrome`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Google_Chrome]`_`f, and `F33f`_`[Safari`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Safari_(web_browser)]`_`f) plus the `F33f`_`[iOS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=IOS]`_`f and `F33f`_`[Android`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Android_(operating_system)]`_`f mobile operating systems. Its support extends as far back as `F33f`_`[Internet Explorer`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Internet_Explorer]`_`f 8 and `F33f`_`[Android`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Android_(operating_system)]`_`f 2.3.`:cite-ref-15[`F5bf`_`[15`#cite-note-15]`_`f]
>>Usage
>>>Including the library
The Velocity library is a single JavaScript file containing all of its core functions. It can be included within a web page by linking to a local copy or to one of the many copies available from public servers, including `F33f`_`[MaxCDN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=MaxCDN]`_`f's `F33f`_`[jsDelivr`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JSDelivr]`_`f or `F33f`_`[Cloudflare`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Cloudflare]`_`f's cdnjs.
`B100`F9d9<script src="velocity.min.js"></script>`f`b
It is also possible to include Velocity directly from content delivery networks. (The integrity attribute is used for `F33f`_`[Subresource Integrity`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Subresource_Integrity]`_`f.) It is recommended to always use `F33f`_`[HTTPS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=HTTPS]`_`f for resources but this can be replaced with `B100`F9d9//`f`b to make use of `F33f`_`[protocol relative URLs`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Protocol_relative_URL]`_`f.
`B100`F9d9<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integrity="sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" crossorigin="anonymous"></script>`f`b
>>>Usage styles
Velocity has two usage styles:
• The `B100`F9d9$.Velocity`f`b function, which is a `F33f`_`[factory method`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Factory_method_pattern]`_`f extended from the `F33f`_`[jQuery`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JQuery]`_`f root object. This method animates raw `F33f`_`[DOM`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Document_Object_Model]`_`f elements instead of `F33f`_`[jQuery`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JQuery]`_`f-wrapped elements. This is the style employed when using Velocity without jQuery on the page.
• The `B100`F9d9$element.velocity()`f`b function. This is the style used for animating jQuery element objects when jQuery `*is`* present on the page.
Animation calls in Velocity consist of supplying the desired element(s) to animate, an `*animation property map`* to specify the `F33f`_`[CSS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=CSS]`_`f properties to be animated, and an optional `*options object`* to specify animation settings (e.g. `*duration`*).
>>>Arguments
Velocity accepts one or more arguments. The first argument, which is required, can either be the name of a predefined Velocity command (e.g. `*scroll`* or `*reverse`*) or an object consisting of CSS properties to be animated:
`B100`F9d9// Animate an element's width to 100px and its left property to 200px`f`b
`B100`F9d9$element.velocity({ width: "100px", left: "200px" });`f`b
The second argument, which is optional, is an object. It is used to specify animation options such as `*duration`*, `*easing`*, and `*complete`* (an arbitrary function to execute once the animation has completed):
`B100`F9d9// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.`f`b
`B100`F9d9$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });`f`b
>>>Chaining
Creating a series of consecutive animation calls in Velocity consists of placing `*velocity()`* calls back-to-back on the target `F33f`_`[jQuery`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JQuery]`_`f element object:
`B100`F9d9$element`f`b
`B100`F9d9 .velocity({ height: 300 }, { duration: 1000 })`f`b
`B100`F9d9 // Continue on to this animation once the previous one has completed`f`b
`B100`F9d9 .velocity({ top: 200 }, { duration: 600 })`f`b
`B100`F9d9 // And once more...`f`b
`B100`F9d9 .velocity({ opacity: 0 }, { duration: 200 });`f`b
>>>Scrolling and reversal
Scrolling in Velocity consists of passing in `*"scroll"`* as Velocity's first argument — in place of the typical CSS properties map:
`B100`F9d9// Scroll with a duration of 750 ms`f`b
`B100`F9d9$element.velocity("scroll", { duration: 750 });`f`b
The browser will subsequently scroll down to the top edge of the element that Velocity was invoked on.
Animation reversal in Velocity consists of passing in `*"reverse"`* as Velocity's first argument:
`B100`F9d9// Animate an element's height`f`b
`B100`F9d9$element.velocity({ height: "500px" }, { duration: 500 });`f`b
`B100`F9d9// Reverse the previous animation; animate back to the element's original height using the previous duration`f`b
`B100`F9d9$element.velocity("reverse");`f`b
Velocity's `*reverse`* command defaults to the animation options used in the prior call. Passing in a new options object extends the previous one:
`B100`F9d9$element.velocity({ height: "500px" }, { duration: 500 });`f`b
`B100`F9d9// Extend the previous reverse call's options object with a new duration value`f`b
`B100`F9d9$element.velocity("reverse", { duration: 1000 });`f`b
>>History
Velocity was developed by Julian Shapiro to address a lack of performant and designer-oriented `F33f`_`[JavaScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript]`_`f animation libraries.`:cite-ref-16[`F5bf`_`[16`#cite-note-16]`_`f]`:cite-ref-17[`F5bf`_`[17`#cite-note-17]`_`f] `F33f`_`[Stripe`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Stripe_(company)]`_`f, a popular `F33f`_`[web developer`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_developer]`_`f-focused `F33f`_`[Internet technology`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Internet_technology]`_`f company sponsored Shapiro on a grant to help provide the financial resources necessary to continue full-time development on Velocity.`:cite-ref-18[`F5bf`_`[18`#cite-note-18]`_`f]
The high performance of Velocity's internal animation engine helped to repopularize JavaScript-based web animation, which had previously fallen out of favor for `F33f`_`[CSS`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=CSS]`_`f-based animation due to its speed advantages over older JavaScript libraries that lacked a focus on animation.`:cite-ref-19[`F5bf`_`[19`#cite-note-19]`_`f]
In September 2014, Shapiro released `*Velocity Motion Designer`*, a tool for designing animations on live production websites that allowed for real-time exporting of the generated animation code for subsequent use within an `F33f`_`[IDE`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Integrated_development_environment]`_`f.`:cite-ref-20[`F5bf`_`[20`#cite-note-20]`_`f] In March 2015, `F33f`_`[Peachpit`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Peachpit]`_`f published Shapiro's `*Web Animation using JavaScript`* book, which teaches both the beginning and advanced principles of developing web animations using Velocity. As of mid-2015, Velocity continues to be developed and maintained exclusively by Shapiro.`:cite-ref-21[`F5bf`_`[21`#cite-note-21]`_`f]
In addition to Velocity's use in professional enterprise environments, it is also widely used for `F33f`_`[web development`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_development]`_`f experimentation and beginner practicing. Proof-of-concept web development projects built on top of Velocity are commonly posted to `F33f`_`[CodePen`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=CodePen]`_`f (example), a leading community code sharing service.
>>See also
• `F33f`_`[D3.js`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=D3.js]`_`f
• `F33f`_`[Raphaël`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Raphaël_(JavaScript_library)]`_`f
• `F33f`_`[Three.js`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Three.js]`_`f
• `F33f`_`[jQuery`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JQuery]`_`f
• `F33f`_`[JavaScript framework`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript_framework]`_`f
• `F33f`_`[JavaScript library`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript_library]`_`f
>>Further reading
• Animating without jQuery
• How to use Velocity to easily add animations
• Fast UI animation using Velocity.js
>>External links
• Official website
• Velocity demo gallery
>>References
`:cite-note-1`!1.`! `:citerefjulianshapiro`ajulianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
`:cite-note-2`!2.`! "History for package.json - julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
`:cite-note-github1-3`!3.`! `:citerefjulianshapiro2014`ajulianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2016-01-20.
`:cite-note-davidwalsh1-4`!4.`! `F0af`_`[↑`#cite-ref-davidwalsh1-4-0]`_`f "JavaScript Animation". 15 June 2015.
`:cite-note-5`!5.`! `F0af`_`[↑`#cite-ref-5]`_`f "Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage". `*Forbes.com`*. Retrieved 2016-01-20.
`:cite-note-6`!6.`! `F0af`_`[↑`#cite-ref-6]`_`f "Velocity.js for designers". Studio Wolf. Archived from the original on 2016-03-06. Retrieved 2016-01-20.
`:cite-note-davidwalsh2-7`!7.`! `F0af`_`[↑`#cite-ref-davidwalsh2-7-0]`_`f "CSS vs. JS Animation: Which is Faster?". 28 April 2014.
`:cite-note-8`!8.`! `F0af`_`[↑`#cite-ref-8]`_`f "Velocity, the Powerhouse of JavaScript Libraries". 11 October 2017.
`:cite-note-9`!9.`! `F0af`_`[↑`#cite-ref-9]`_`f `:citerefjulian-shapiro2014`aJulian Shapiro (2014-06-16). "Incredibly Fast UI Animation Using Velocity.js". Sitepoint.com. Retrieved 2016-01-20.
`:cite-note-10`!10.`! `F0af`_`[↑`#cite-ref-10]`_`f "Search · stars:>1 · GitHub". Github.com. Retrieved 2016-01-20.
`:cite-note-11`!11.`! `F0af`_`[↑`#cite-ref-11]`_`f "Shortlist The Net Awards 2015 Celebrating the best in web design and development". Thenetawards.com. Retrieved 2016-01-20.
`:cite-note-12`!12.`! `F0af`_`[↑`#cite-ref-12]`_`f "Animating Without jQuery – Smashing Magazine". Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20.
`:cite-note-13`!13.`! `F0af`_`[↑`#cite-ref-13]`_`f "The Simple Intro to SVG Animation". 31 July 2014.
`:cite-note-14`!14.`! `F0af`_`[↑`#cite-ref-14]`_`f "Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20.
`:cite-note-15`!15.`! `F0af`_`[↑`#cite-ref-15]`_`f "Velocity.js". Julian.com. Retrieved 2016-01-20.
`:cite-note-16`!16.`! `F0af`_`[↑`#cite-ref-16]`_`f `:citerefteam`aTeam, Awwwards. "Interview with Julian Shapiro". Awwwards.com. Retrieved 2016-01-20.
`:cite-note-17`!17.`! `F0af`_`[↑`#cite-ref-17]`_`f `:citerefshapiro2014`aShapiro, Julian (2014-05-21). "Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2016-01-20.
`:cite-note-18`!18.`! `F0af`_`[↑`#cite-ref-18]`_`f `:citerefgreg-brockman2014`aGreg Brockman (2014-06-06). "Open-Source Retreat grantees". Stripe.com. Retrieved 2016-01-20.
`:cite-note-19`!19.`! `F0af`_`[↑`#cite-ref-19]`_`f `:citerefaurelio-de-rosa2014`aAurelio De Rosa (2014-06-23). "Easily Improving jQuery Animations". Sitepoint.com. Retrieved 2016-01-20.
`:cite-note-20`!20.`! `F0af`_`[↑`#cite-ref-20]`_`f `:citerefremix-this-video2014`aRemix this video (2014-09-06). "Velocity Motion Designer: Overview". YouTube. Retrieved 2016-01-20.
`:cite-note-21`!21.`! `F0af`_`[↑`#cite-ref-21]`_`f "Contributors to julianshapiro/Velocity". `*`F33f`_`[GitHub`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=GitHub]`_`f`*.
`c`F0af`_`[↑ Back to top`#top]`_`f`a